<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>英雄</title>
  <link rel="stylesheet" href="./css/hero.css" />
  <link rel="stylesheet" href="./css/comm-v1.css" />
</head>

<body>
  <div class="herolist-box">
    <div class="clearfix herolist-types">
      <ul class="types-left">
        <li>综合</li>
        <li>定位</li>
      </ul>
      <ul class="clearfix types-ms">
        <li data-ptype="10">
          <span class="ms-radio"><i class="i"></i></span>
          <label>本周免费</label>
        </li>
        <li data-ptype="11">
          <span class="ms-radio"><i class="i"></i></span>
          <label>新手推荐</label>
        </li>
      </ul>
      <ul class="clearfix types-ms">
        <li class="current" data-type="0">
          <span class="ms-radio"><i class="i"></i></span>
          <label>全部</label>
        </li>
        <li data-type="3">
          <span class="ms-radio"><i class="i"></i></span>
          <label>坦克</label>
        </li>
        <li data-type="1">
          <span class="ms-radio"><i class="i"></i></span>
          <label>战士</label>
        </li>
        <li data-type="4">
          <span class="ms-radio"><i class="i"></i></span>
          <label>刺客</label>
        </li>
        <li data-type="2">
          <span class="ms-radio"><i class="i"></i></span>
          <label>法师</label>
        </li>
        <li data-type="5">
          <span class="ms-radio"><i class="i"></i></span>
          <label>射手</label>
        </li>
        <li data-type="6">
          <span class="ms-radio"><i class="i"></i></span>
          <label>辅助</label>
        </li>
      </ul>
    </div>
    <div class="herolist-content">
      <ul class="herolist clearfix">
        <!-- <li >
          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 数组比较多，放在了外接的js文件中 -->
  <script src="./hero.js"></script>
  <script>
    // 1. 渲染函数 render 
    function render(arr){
      const res = arr.map((item,index) => {
        return `<li >
          <a href="#" target="_blank"><img src="${item.icon}" width="91" height="91" alt="${item.name}" />${item.name}</a>
        </li> `
      })
      document.querySelector('.herolist').innerHTML = res.join('')
    }
    render(heroArr)

    // 2. 点击可以进行筛选 利用循环绑定多个事件（注意这里li里面包含多个元素，事件委托比较麻烦）
    const lis = document.querySelectorAll('.types-ms li')
   
    lis.forEach(item => {
      item.addEventListener('click',function(){
        document.querySelector('li.current').classList.remove('current')
        this.classList.add('current')
        let ptype = item.dataset.ptype
        let htype = item.dataset.type
        if(htype === '0'){
          render(heroArr)
          return
        }
        const res = heroArr.filter(item => item.pay_type == ptype || item.hero_type == htype )
      
        render(res)
      })
    })
    // 1. 渲染函数 render 
    // function render(arr){
    //   const res = arr.map(ele => {
    //     const {icon,name} = ele
    //     return `<li >
    //       <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
    //     </li>`
    //   })
    //   document.querySelector('.herolist').innerHTML = res.join('')
    // }
    // render(heroArr)
    // 2. 点击可以进行筛选 利用循环绑定多个事件（注意这里li里面包含多个元素，事件委托比较麻烦）
  //  const lis = document.querySelectorAll('.types-ms li')
  //  lis.forEach(item => {
  //    item.addEventListener('click',function(){
  //     document.querySelector('li.current').classList.remove('current')
  //     this.classList.add('current')
  //     let ptype = item.dataset.ptype
  //     let type = item.dataset.type
  //     if(type === '0'){
  //       render(heroArr)
  //       return
  //     }
  //     const res = heroArr.filter(item =>item.pay_type == ptype || item.hero_type == type);
  //     render(res)
  //   })
  //  })

  </script>
</body>

</html>